<template>

	<view class="main">
		<image class="ysaimg" style="width: 100%;height: 100vh;position: fixed;top: 0;" src="/static/images/ysxq.png"></image>

		<u-navbar :bgColor="bgColor" :fixed="false" title="医生详情" placeholder="true" :autoBack="true"></u-navbar>

		<view class="ysjs">
			<view>
				<view class="name">{{DoctorDetailData.name}}</view>
				<view class="zhiwu">{{DoctorDetailData.position.name}}</view>
				<view class="zc">{{DoctorDetailData.store.name}}</view>
				<view class="row_a_c">

					<view class="row_a_c">
						<view class="pf">评价</view>
						<view class="ff">{{DoctorDetailData.label}}</view>
					</view>

					<view class="row_a_c" style="margin-left: 30rpx;">
						<view class="pf">接诊量</view>
						<view class="ff">{{DoctorDetailData.reception_count}}</view>
					</view>
				</view>
			</view>

			<image class="tx" :src="DoctorDetailData.avatar"></image>

		</view>

		<view class="infot">

			<view class="info">
				<view class="row_a_c">
					<view class="xian"></view>
					<view class="title">擅长</view>
				</view>
				<view class="infowz">
					{{DoctorDetailData.specialty}}
				</view>
			</view>

			<view class="infob">

				<view class="row_a_c">
					<view class="xian"></view>
					<view class="title">个人简介</view>
				</view>

				<view class="grjj">
					{{DoctorDetailData.intro}}
				</view>

			</view>

		</view>


	</view>

</template>

<script>
	import api_doctor from '@/api/doctor.js';

	export default {
		components: {

		},
		async onLoad(option) {
			this.id = option.id;
			console.log('111111111111111', this.id);
		},


		async onShow() {
			this.getDoctorDetailFuc(); //获取医生详情
		},

		data() {
			return {
				DoctorDetailData: null,
				id: null,
				bgColor: 'rgba(0, 31, 63, 0)',




			};
		},
		methods: {
			//获取医生详情
			async getDoctorDetailFuc() {
				var per = {
					doctor: this.id,
				}
				const res = await api_doctor.getDoctorDetail(per);
				if (res.code == 1) {
					this.DoctorDetailData = res.data.info
					console.log('111111111111111111', this.DoctorDetailData)
				} else {
					this.$util.msg(res.message);
					return;
				}
			},

		}
	};
</script>

<style scoped lang="scss">
	.ysjs {
		position: absolute;
		top: 250rpx;
		left: 62rpx;

	}

	.name {
		font-weight: 400;
		font-size: 40rpx;
		color: rgba(0, 0, 0, 0.9);
		margin-bottom: 16rpx;
	}

	.pf {
		font-weight: 400;
		font-size: 20rpx;
		color: rgba(0, 0, 0, 0.4);
		margin-right: 10rpx;
	}

	.ff {

		font-weight: 500;
		font-size: 32rpx;
		color: #F69739;



	}

	.tx {
		width: 272rpx;
		height: 272rpx;
		border-radius: 200rpx;
		position: absolute;
		top: -30rpx;
		left: 360rpx;
	}

	.zhiwu {
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.6);
		margin-bottom: 8rpx;
	}

	.zc {
		font-weight: 400;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.6);
		margin-bottom: 24rpx;
	}

	.infot {
		position: absolute;
		top: 540rpx;
		left: 32rpx;
		width: 686rpx;
	}

	.info {

		min-height: 220rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 32rpx;
		margin-bottom: 30rpx;
	}

	.xian {
		width: 8rpx;
		height: 32rpx;
		background: linear-gradient(180deg, #EBF6F6 0%, #27CCBB 100%);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-right: 16rpx;
	}

	.title {

		font-weight: 400;
		font-size: 28rpx;
		color: #1FA194;

	}

	.infowz {
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.85);
		margin-top: 32rpx;
	}

	.infob {

		min-height: 220rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 32rpx;
	}

	.grjj {
		margin-top: 32rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.6);
	}
</style>